/**
 * @author zhangqiang
 * @date   17/7/20
 */
import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Toast} from 'antd-mobile'
import {getOrderList} from '../../actions/paySuccessActions'
import 'style/familyNameList.scss';
import BottomMenu from '../../../../../../src/js/components/bottomMenu';
import BackMeanSure from '../../utils/backMeanSure';
import common from '../../utils/common'
import UrlOperation from '../../utils/urlOperation'
import style from './index.scss'
import Item from 'antd-mobile/lib/list/ListItem';

class Paysuccess extends Component {
	constructor(props) {
		super(props);
		this.state = {
			payStatusText: '',
			isToPay: ''
		}
		this.chargeOrderId=UrlOperation.getUrlParam('chargeOrderId')
		this.payType=UrlOperation.getUrlParam('payType')
		this.advertUrl=this.advertUrl.bind(this)
		this.backMeanSureInstance = new BackMeanSure(this.goHome.bind(this), 'paysuccess');		
	}

	//返回首页
	goHome() {
		history.pushState({}, '', '');
		let backNumber = -1 * history.length + 1;
		history.go(backNumber);
	}

	toUrl(url) {
		this.context.router.push(url);
	}

	componentWillMount(){
		if(sessionStorage.getItem('payType')){
			sessionStorage.removeItem('payType')  //支付成功删除选择支付类型
		}

		sessionStorage.removeItem('cacheAllState')  //删除首页缓存
	}

	componentDidMount() {
		common.setViewTitle('支付成功');
		this.backMeanSureInstance.bindBackMeansure();		
		let getData={
			chargeOrderId: this.chargeOrderId,
			payType: this.payType
		};
		this.props.dispatch(getOrderList(getData))
		var payData = JSON.parse(sessionStorage.getItem('payData'));
		if(common.isToPay(payData.carNumPrefix,payData['address.cityId'])){
			this.setState({
				payStatusText: '提交成功',
				isToPay: true
			})
		}else{
			this.setState({
				payStatusText: '支付成功',
				isToPay: false
			})
		}			
	}

	//底部跳转
	bottomHandle(index) {
		if (index == 0) {
			this.props.router.push('/');
		}
		else {
			this.props.router.push('orderList');
		}
    }

	componentWillUnmount() {
		//支付成功页 回复默认状态
		sessionStorage.removeItem('cacheAllState')
		sessionStorage.removeItem('addInfoCache')
	}

	advertUrl(url){
		window.location.href=url;
	}

	render() {
		let advert = this.props.passOrderList.uiConfig;
		var orderParam = JSON.parse(sessionStorage.getItem('payData'));

	return (
			<div className={style.paysuccess}>
				<div className={style.explain}>
						<div className={style.successImg}>
							<img src="./images/success.png" alt=""/>
							<div>{this.state.payStatusText}</div>
						</div>
						<div className={style.caption}>
							您申请的年检办理服务{this.state.isToPay?'提交成功':'在线支付成功'}， 请准备好所需资料，保持电话畅通， 等待邮政速递人员上门收件！
						</div>
				</div>
				<div style={{height: '.24rem',background: '#f2f2f2'}}></div>

				<div className={style.information}>
				<div>请准备好以下所需资料：</div>
				{
					orderParam.docArray.map((item,i)=>{
						return <div key={i}>{item}</div>
					})
				}
				</div>

				<div className={style.orderList}>
					{
						this.props.passOrderList.orderList.map((e,i)=>{
							return <div className={style.list} key={i} onClick={()=>{this.toUrl(`orderDetails/${e.orderId}/${this.chargeOrderId}`)}}>
								<div className={style.visaType}>
									<span className={`${style.orderTitle} text-overflow-1`}>{e.orderTitle }</span>
									<div className={style.toDetails}>
										<span>查看订单详情</span>
										<img src="./images/green_r.png" alt=""/>
									</div>
									<div className={style.orderNum}>订单号：<span>{e.orderId }</span></div>
								</div>
							</div>
						})
					}
				</div>

				{
					advert?
						<div>
							<div style={{height: '.46rem'}}></div>
							<div className={style.banner}>
								<img src={advert.icon} onClick={()=>{this.advertUrl(advert.url)}} alt=""/>
							</div>
						</div>:''
				}

				<div style={{height: '1.54rem'}}></div>
				 {/*底部导航菜单start*/}
				 <BottomMenu onChange={(index) => {
                        this.bottomHandle(index);
                    }} data={[{
                        text: '车辆年检',
                        img: './images/year.png',
                        checkedImg: './images/year_selected.png'
                    }, {text: '我的订单', img: './images/mine.png', checkedImg: './images/mine_selected.png'}]}/> 
				{/*底部导航菜单end*/}
			</div>
				)
    }
}

//使用context
Paysuccess.contextTypes = {
    router: React.PropTypes.object.isRequired
};

Paysuccess.defaultProps = {
	passOrderList:{
		orderList:[],
		uiConfig:{}
	},
	list:[]
};

function mapStateToProps(state) {
	return Object.assign({}, state.paySuccessResult);
}

export default connect(mapStateToProps)(Paysuccess);
